<!--
 * @Description: 
 * @version: 
 * @Author: mikeJang
 * @Date: 2021-08-23 19:33:02
 * @LastEditors: mikeJang
 * @LastEditTime: 2021-08-24 17:40:42
 * @FilePath: \YU_LIN_Frontend\src\components\SVideoJs.vue
-->
<template>
  <video ref="player" class="video-js vjs-live vjs-liveui"></video>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import api from "@/util/api";
import { message } from "ant-design-vue";
export default {
  props: {
    id: {
      type: String,
      default: ""
    },
    src: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      palyer: null
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.renderVideo();
  },
  methods: {
    renderVideo() {
      if (this.src !== "") {
        this.player = videojs(this.$refs.player, {
          liveui: true,
          preload: "none",
          autoplay: false,
          controls: true,
          muted: true,
          loop: false
        });
      }
      if (this.player) {
        this.player.on("ready", () => {
          this.player.src([
            {
              src: this.src,
              type: "application/x-mpegURL"
            }
          ]);
        });

        this.player.on("pause", () => {
          this.player.mediaLoader.isDisposed_ = true;
          this.player.reset();
          this.freshSrc();
        });
        this.player.on("abort", () => {
          this.player.mediaLoader.isDisposed_ = true;
          this.player.reset();
        });
        this.player.on("error", () => {
          this.player.mediaLoader.isDisposed_ = true;
          this.player.reset();
        });
      }
    },
    async freshSrc() {
      await api.post(`/api/${this.$apiUrl}-device/hk/device/video/${this.id}`).then(res => {
        if (res) {
          this.player.src([
            {
              src: res,
              type: "application/x-mpegURL"
            }
          ]);
        } else {
          message.error(`设备${this.id}重新获取播放地址失败！`);
        }
      });
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>
<style lang="scss">
.video-js {
  width: 100%;
  height: 100%;
}
</style>
